<!--
 * @author: Spring
 * @create: 2021-06-23 09:04 AM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-07-01 15:53 PM
 * @desc: 
-->
<template>
  <div class="container">
    <div :class="focus ? 'edit_box' : 'edit_box2'">
      <div
        class="edit"
        contenteditable="true"
        placeholder="告诉你个小秘密,发布沸点时添加合适的话题会被更多掘友们看见哟~"
        @focus="writefocus"
        @blur="focus = false"
        @input="content($event)"
        ref="edit"
      ></div>
      <div class="img_link">
        <div class="chooseImg" v-for="(item, index) in imgArr" :key="item">
          <img :src="$image(item)" alt="" />
          <span class="el-icon-error" @click="removeImg(index)"></span>
        </div>
        <el-upload
          action="http://api_devss.wanxikeji.cn/api/savePic"
          :show-file-list="false"
          name="img"
          accept="image/jpeg,image/gif,image/png"
          :on-success="handleSuccess"
          :limit="9"
          multiple
          class="upload"
        >
          <div
            class="addImg chooseImg"
            v-if="imgArr.length > 0 && imgArr.length < 9"
          >
            +
          </div>
        </el-upload>
        <div class="link" v-show="tagchoose.length">{{ tagchoose[0] }}</div>
      </div>
      <div class="num">{{ num }}</div>
    </div>
    <div class="add">
      <div class="left">
        <div class="face" @click.stop="showFace($event)">
          <img style="width:" src="/img/svg/face.svg" alt="" />表情
          <face class="facezj" @face="face" :show="show.face" />
        </div>

        <el-upload
          action="http://api_devss.wanxikeji.cn/api/savePic"
          :show-file-list="false"
          name="img"
          accept="image/jpeg,image/gif,image/png"
          :on-success="handleSuccess"
          :limit="9"
          multiple
          class="upload"
        >
          <div class="img"><img src="/img/svg/img.svg" alt="" />图片</div>
        </el-upload>
        <div class="link"><img src="/img/svg/link.svg" alt="" />链接</div>
        <div class="topic">
          <div @click="show.topic = !show.topic">
            <img src="/img/svg/topic.svg" alt="" />
            话题
          </div>
          <div class="tag" v-show="show.topic">
            <el-input
              placeholder="搜索话题"
              suffix-icon="el-icon-search"
              v-model="search"
              class="search_input"
            >
            </el-input>
            <div class="tag_box">
              <div
                @click="choosetag(item)"
                class="tag_card"
                v-for="item in tag"
                :key="item.tag_id"
              >
                <!-- <div class="left">
                  <img src="" alt="">
                </div>
                <div class="right"> -->
                <div class="title">{{ item.tag_name }}</div>
                <div class="info">{{ item.num }}关注</div>
                <!-- </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div :class="[num == 1000 ? 'issue' : 'issueo']" @click="submit">
        发布
      </div>
    </div>
  </div>
</template>

<script>
import face from "./Face.vue";
import { addModifyArticle, tagRanking } from "/utils/api.js";
export default {
  inject: ["reload"],
  name: "release",
  data() {
    return {
      show: {
        face: false,
        topic: false,
      },
      focus: false,
      //上传的图片数组
      imgArr: [],
      //输入框的文字
      inputContent: "",
      //标签
      tag: [],
      //标签搜索框
      search: "",
      //选择的标签
      tagchoose: [],
    };
  },
  components: {
    face,
  },
  computed: {
    num() {
      return 1000 - this.inputContent.length;
    },
  },
  updated() {
    // console.log("111");
    // console.log(document.querySelector(".edit"));
    
  },
  mounted() {
    // document.querySelector(".edit").addEventListener("input", function (e) {
    //   console.log(e);
    // });
    this.gettagRanking();
  },

  methods: {
    writefocus() {
      this.$store.commit("judgeLogin");
      this.focus = true;
    },
    //选择标签
    choosetag(item) {
      this.tagchoose = [];
      this.tagchoose.push(item.tag_name);
      console.log(this.tagchoose);
    },
    //获取标签
    gettagRanking() {
      tagRanking().then((res) => {
        this.tag = res.data;
      });
    },
    submit() {
      console.log(this.$refs.edit.innerHTML);
      if (this.$refs.edit.innerHTML==""&&this.inputContent=="") {
        this.$message("请输入想要发布的内容", "error");
        return;
      }
      if (!this.tagchoose.length) {
        this.$message("请选择话题", "error");
        return;
      }
      let obj = {
        token: this.$store.state.token,
        info: JSON.stringify({
          content: this.inputContent||this.$refs.edit.innerHTML,
          imgs: this.imgArr,
        }),
        tags_name: this.tagchoose,
        type: 2,
      };
      addModifyArticle(obj).then((res) => {
        console.log(res);
        this.reload();
      });
    },
    content(e) {
      // console.log(111);
      // console.log(e.target.innerHTML);
      this.inputContent = e.target.innerHTML;
    },
    face(item) {
      // console.log("111");
      this.$refs.edit.innerHTML += `<img src=${item} style="width:22px;height:22px" />`;
      this.$refs.edit.focus();
    },
    showFace(e) {
      console.log(e.target);
      console.log(e.target.getAttribute("only"));
      if (e.target.getAttribute("only")) {
        return;
      }
      this.show.face = !this.show.face;
    },
    handleSuccess(response, file, fileList) {
      this.imgArr.push(response.data);
      console.log(this.imgArr);
    },
    removeImg(index) {
      this.imgArr.splice(index);
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 570px;
  min-height: 153px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 16px 15px 10px;
}
.edit_box {
  width: 530px;
  min-height: 87px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid #007fff;
  background-color: #fff;
  .edit {
    width: 528px;
    min-height: 55px;
    border: none;
    outline: none;
    overflow: auto;
    text-align: left;
    
  }
  .edit:empty::before {
    content: attr(placeholder);
    color: #bbb;
    background-color: #f9fafb;
  }
  /*不一样的地方*/
  .edit:focus {
    content: none;
  }
  .img_link {
    @include flex(flex-start, center);
    flex-wrap: wrap;
    .chooseImg {
      width: 80px;
      height: 80px;
      position: relative;
      margin-right: 8px;
      margin-bottom: 8px;
      span {
        position: absolute;
        top: 3px;
        right: 3px;
        cursor: pointer;
      }
      img {
        width: 80px;
        height: 80px;
        cursor: pointer;
      }
    }
    .addImg {
      width: 80px;
      height: 80px;
      border: 1px dashed #c5c5c5;
      cursor: pointer;
      @include font(50px, #d2d2d2);
      @include flex();
    }
    .link {
      width: 52px;
      height: 22px;
      border-radius: 14px;
      border: 1px solid #007fff;
      @include font(13px, #007fff);
      @include flex();
    }
  }
  .num {
    width: 100%;
    height: 23px;
    box-sizing: border-box;
    padding-right: 14px;
    @include flex(flex-end, center);
    @include font(13px, #a1a9b3);
  }
}
.edit_box2 {
  width: 530px;
  min-height: 87px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid hsla(0, 0%, 59.2%, 0.2);
  background-color: rgba(226, 230, 235, 0.2);
  .edit {
    width: 528px;
    min-height: 55px;
    border: none;
    outline: none;
    overflow: auto;
    text-align: left;
    img {
      width: 22px;
      height: 22px;
    }
  }
  .edit:empty::before {
    content: attr(placeholder);
    color: #bbb;
    background-color: #f9fafb;
  }
  /*不一样的地方*/
  .edit:focus {
    content: none;
  }
  .img_link {
    @include flex(flex-start, center);
    flex-wrap: wrap;
    .chooseImg {
      width: 80px;
      height: 80px;
      position: relative;
      margin-right: 8px;
      margin-bottom: 8px;
      span {
        position: absolute;
        top: 3px;
        right: 3px;
        cursor: pointer;
      }
      img {
        width: 80px;
        height: 80px;
        cursor: pointer;
      }
    }
    .addImg {
      width: 80px;
      height: 80px;
      border: 1px dashed #c5c5c5;
      cursor: pointer;
      @include font(50px, #d2d2d2);
      @include flex();
    }
    .link {
      width: 52px;
      height: 22px;
      border-radius: 14px;
      border: 1px solid #007fff;
      @include font(13px, #007fff);
      @include flex();
    }
  }
  .num {
    width: 100%;
    height: 23px;
    box-sizing: border-box;
    padding-right: 14px;
    @include flex(flex-end, center);
    @include font(13px, #a1a9b3);
  }
}
.add {
  width: 530px;
  margin-top: 10px;
  @include flex(space-between, center);
  .left {
    img{
      width: 22px;
      height: 22px;
    }
    width: 260px;
    @include flex(space-between, center);
    div {
      cursor: pointer;
      @include flex(center, center);
      @include font(13px, #027fff);
    }
    .face {
      position: relative;
      z-index: 9999;
      .facezj {
        position: absolute;
        top: 32px;
        left: 0;
        width: 304px;
        height: 234px;
        box-sizing: border-box;
        padding: 12px;
        z-index: 9999;
        @include flex(flex-start, center, column);
      }
    }
    .img {
      .upload {
        cursor: pointer;
        @include flex(center, center);
        @include font(13px, #027fff);
      }
    }
    .topic {
      position: relative;
      z-index: 9999;
      .tag {
        z-index: 9999;
        @include position(absolute, 20px, none, none, 0, 316px, 434px);
        box-sizing: border-box;
        padding: 18px 20px;
        background-color: #fff;
        @include flex(flex-start, center, column);
        overflow-y: auto;
        .tag_box {
          @include flex(flex-start, center, column);
          width: 260px;
          height: 42px;
          box-sizing: border-box;
          .tag_card {
            padding: 10px 0;
            @include flex(flex-start, flex-start, column);
            width: 100%;
            border-bottom: 1px solid #f4f4f4;
            .title {
              @include font(14px, #333);
            }
            .info {
              @include font(13px, #8a9aa9);
            }
          }
        }
      }
    }
  }
  .issue {
    width: 72px;
    height: 32px;
    border-radius: 2px;
    background-color: #027fff;
    opacity: 0.2;
    cursor: pointer;
    @include font(15px, #fff);
    @include flex();
  }
  .issueo {
    width: 72px;
    height: 32px;
    border-radius: 2px;
    background-color: #027fff;
    opacity: 1;
    cursor: pointer;
    @include font(15px, #fff);
    @include flex();
  }
}
</style>
